<template>
  <div class="container">
    <detail-header />
    <detail-banner :banner="detailData.bannerImg" :gallary="detailData.gallaryImgs" />
    <detail-baseinfo />
    <detail-notice />
    <detail-list :list="detailData.categoryList" />
  </div>
</template>

<script>
import DetailBanner from './components/Banner'
import DetailHeader from './components/Header'
import DetailList from './components/List'
import DetailNotice from './components/Notice'
import DetailBaseinfo from './components/Baseinfo'
import axios from 'axios'
export default {
  name: 'Detail',
  components: {
    DetailBanner,
    DetailHeader,
    DetailList,
    DetailNotice,
    DetailBaseinfo
  },
  data () {
    return {
      detailData: {
        bannerImg: '',
        gallaryImgs: [],
        categoryList: []
      }
    }
  },
  methods: {
    getDetailData () {
      axios.get(`/api/detail.json`, {
        params: {
          id: this.$route.params.id
        }
      }).then(this.handleDetailData)
    },
    handleDetailData (res) {
      res = res.data
      if (res.ret && res.data) {
        this.detailData = res.data
      }
    }
  },
  mounted () {
    this.getDetailData()
  }
}
</script>

<style lang="stylus" scoped>
  .div
    height 50rem
</style>
